<template>
  <div v-if="list.length">
    <div class="base-pad bg-f mar-t" @click="goPointPage({path:'/auxiliary/xx/details',query:{id:v.id}})"
         v-for="(v,i) in list" :key="i">
      <div class="flex-x-bt br-b-e fon-b pad-tb">
        <div class="flex-y-center">
          <span class="yuan cbred" v-if="v.buyType=='1'">{{stateName(v.buyType)}}</span>
          <span class="yuan cbblue" v-else>{{stateName(v.buyType)}}</span>
          <span class="fon-w6">{{v.typeName}}</span>
        </div>
        <div class="fon-sm fon-w6 col-r">￥{{v.price}}元/{{v.unit}}</div>
      </div>
      <div class="col-6 flex w100 fon-b pad-t-20 pad-b-10">
        <div class="flex-g-1 w60 hide-e heightbg">品牌：{{v.brand}}</div>
        <div class="flex-g-1 w40 hide-e heightbg">数量：{{v.number}}{{v.unit}}</div>
      </div>
      <div class="fon-b col-6 flex w100 pad-tb pad-t-10 pad-b-10">
        <div class="flex-g-1 w60 hide-e heightbg">交货地：{{v.address}}</div>
        <div class="flex-g-1 w40 hide-e heightbg">规格：{{v.spec}}</div>
      </div>
      <div class="fon-b col-9 flex-x-bt pad-t-10">
        <div class="fon-xss">
          <span class="textbox mar-r-5" :class="{'col-activeb':v.guarantee =='1'}">保</span>
          <span class="textbox mar-r-5" :class="{'col-activeg':v.isAuth=='1'}">实</span>
          <!--<span class="textbox mar-r-5">V</span>-->
        </div>
        <div>
          <span class="col-9 fon-xs mar-l flex-y-center"><i class="iconfont icon-Group- fon-xxl mar-r-10"></i>{{formatDateByTimeStamp(v.createdAt,"YYYY-MM-DD HH:mm")}}</span>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
  import {utilMixins} from "@/plugins/util-mixins";
  import DdLayoutImg from "../../layout/dd-layout-img";

  export default {
    components: {DdLayoutImg},
    mixins: [utilMixins],
    props: {
      list: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      stateName(buyType) {
        let s
        switch (buyType) {
          case '1':
            s = '买'
            break
          case '2':
            s = '卖'
            break
        }
        return s
      },
    },
  }

</script>

<style scoped lang="scss">
  @import "../../../assets/common";
  @import "../../../assets/theme";

  .xxDetail {
    padding-bottom: 120px;
  }

  .yuan {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    margin-right: 10px;
  }

  .cbred {
    color: #f00;
    border: 1.1px solid #f00;
  }

  .cbblue {
    color: #1C9BFC;
    border: 1.1px solid #1C9BFC;
  }

  .ckxx {
    border: 1.1px solid #69A3F8;
    color: #69A3F8;
    padding: 16px 15px;
    line-height: 15px;
  }

  .textbox {
    border-radius: 5px;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1.1px solid #999;
  }

  .col-activeg {
    color: #6EB7BE;
    border: 1.1px solid #6EB7BE;
  }

  .col-activeh {
    color: #5A94E9;
    border: 1.1px solid #5A94E9;
  }

  .col-activeb {
    color: #4DBFC6;
    border: 1.1px solid #4DBFC6;
  }

  .imgwidth {
    width: 90px !important;
    height: 90px !important;
  }
  .heightbg{
    flex-grow: 1;
    flex-direction: row;
    height: 36px;
    line-height: 36px;
  }
</style>
